<template>
  <div>
    <header class="app-header">首页</header>
    <div class="bb">
      <section>
        <divider align="left" colors='red' borders="red">学习进度</divider>
        <!-- <progress/> -->
        <!-- {{total}}
      {{styleList.length}} -->
        <circles :total='total' :styleList='styleList.length' />
        <divider align='center' colors="blue" borders="blue">考试成绩</divider>
        <div id="myChart" :style="{width: '100%', height: '350px'}"></div>
      </section>
    </div>
    <!-- <toast/> -->
    <!-- <button @click="btn">fdsfe</button> -->
  </div>
</template>

<script>
import divider from '@/components/divider/divider'
import circles from '@/components/circle/circle'
import { mapState, mapActions } from 'vuex'
// import toast from '@/plugins/toast/toast'
// import progress from '@/components/progress/progress'
export default {
  computed: {
    ...mapState('msbd', ['total']),
    ...mapState('login', ['styleList'])
  },
  methods: {
    ...mapActions('msbd', ['getList']),
    btn () {
      this.$toast('asdsf', 1500, 70)
    },
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      });
      window.onresize = function () {
        myChart.resize()
      }
    }
  },
  async mounted () {
    await this.drawLine()
    await this.getList()
  },
  components: {
    divider,
    // progress
    // toast
    circles
  }
}
</script>

<style scoped>
.bb {
  height: calc(100vh - 120px);
  overflow: hidden;
  overflow-y: auto;
}
</style>